import { ReactNode } from "react";
import { useRoutes } from "react-router-dom";
import About from "./About";
import Hello from "./Hello";
import Home from "./Home";

export interface Props {
  routes?: RouteConfig[];
}
export interface RouteConfig {
  path: string;
  name?: string;
  element?: ReactNode | null;
  children?: RouteConfig[];
}

const routes: RouteConfig[] = [
  {
    name: "home",
    path: "/",
    element: <Home />
  },
  {
    name: "about",
    path: "/about",
    element: <About />,
    children: [
      {
        name: "hello",
        path: "/about/hello",
        element: <Hello />
      }
    ]
  },
  {
    path: "*",
    element: <h2>Not Found 404</h2>
  }
];

const Router = () => {
  const routedComponents = useRoutes(routes);
  return routedComponents;
};

export default Router;
